<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/style.css"/>
        <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css"/>
        <link href="assets/css/codemirror.css" rel="stylesheet">
        <link rel="stylesheet" href="assets/css/ace.min.css" />
        <link rel="stylesheet" href="Widget/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
        <link rel="stylesheet" href="assets/css/font-awesome.min.css" />

		<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->
        <!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
			<script src="assets/js/jquery.min.js"></script>
		<!-- <![endif]-->
		<!--[if IE]>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <![endif]-->
		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>
		<!-- <![endif]-->
		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
        <script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/typeahead-bs2.min.js"></script>
        <script type="text/javascript" src="Widget/zTree/js/jquery.ztree.all-3.5.min.js"></script>
        <script src="js/lrtk.js" type="text/javascript" ></script>
  <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
  <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
  <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/layer/layer.js"></script>
<title>分类管理</title>
</head>

<body>
<div id="vuebox">
<div class=" clearfix">
 <div id="category">
    <div id="scrollsidebar" class="left_Treeview">
    <div class="show_btn" id="rightArrow"><span></span></div>
    <div class="widget-box side_content" >
    <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
     <div class="side_list">
      <div class="widget-header header-color-green2">
          <h4 class="lighter smaller">产品类型列表</h4>
      </div>
      <div class="widget-body">
          <div class="widget-main padding-8">
            <div  class="form-group">
              <select class="form-control" v-model="selecata1" @change='sellChange'>
                <option value="0">请选择一级分类</option>
                <option v-for="item in cata1" :value="item.id">{{item.name}}</option>
              </select>
              <select class="form-control" style="margin-top: 10px" v-model="selecata2" @change='sel2Change'>
                <option value="0">请选择二级分类</option>
                <option v-for="item in cata2" :value="item.id">{{item.name}}</option>
              </select>
              <select class="form-control" style="margin-top: 10px" v-model="selecata3" @change='sel3Change'>
                <option value="0">请选择三级分类</option>
                <option v-for="item in cata3" :value="item.id">{{item.name}}</option>
              </select>
            </div>
          </div>
  </div>
  </div>
  </div>  
  </div>
<!---->
 <!--<iframe ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO  SRC="product-category-add.html" class="page_right_style"></iframe>-->

   <div><button type="button" class="btn btn-primary" @click="addAttr">添加平台属性</button></div>
   <!--添加属性名-->
   <div style="display: none;margin-top: 10px" id="attrNames">
     <label id="attrName">属性名称:</label>
     <input type="text" v-model="attrName"/>
     <button type="button" @click="addvals()" class="btn btn-primary" >添加</button>
   </div>
   <!--显示三级分类下的属性值名称-->
   <table id="seleAttrlisttable" class="table table-bordered table-hover"  style="width: 1000px;float: left">
     <tr>
       <th class="text-center">属性id</th>
       <th class="text-center">属性名称</th>
       <th class="text-center">操作</th>
     </tr>
     <tr class="text-center" v-for="item in attrList">
       <td>{{item.id}}</td>
       <td>{{item.attrName}}</td>
       <td>
         <button class="btn btn-primary btn-sm" @click="upvalue(item.id)">修改</button>
         <button class="btn btn-danger btn-sm"  @click="delevalue(item.id)">删除</button>
       </td>
     </tr>
     <tr v-show="attrList.length==0">
       <td colspan="4" class="text-center text-info">
         <p>暂无数据...</p>
       </td>
     </tr>
   </table>

   <div style="width: 1000px;float: left;display: none" id="addAttrlisttable">
     <button class="btn btn-primary" @click="goback">返回属性列表</button><br/>
     <input type="button"  class="btn btn-primary" onclick="add()" id="btn_addtr" value="+添加属性值">
     <table id="children">

     </table>
   </div>


   <!--修改属性信息-->
   <div id="upAttrvalu" style="display: none">
     <span>属性名称</span><input type="text" v-model="attrvaluelist.attrName"/><br/>
     <button class="btn btn-success" type="button" onclick="addvalues()">添加属性值</button><br/>
     <table class="table table-bordered table-hover"  style="width: 1000px;float: left" id="upval">
     <tr>
       <td>属性id</td>
       <td>属性名称</td>
       <td>操作</td>
     </tr>
     <tr v-for="a in attrvaluelist.pmsBaseAttrValueList">
     <td>
       <input type="text" readonly :value="a.id" name="shuxingzhi">
     </td>
       <td>
         <input type="text" onblur="upblur()" name="upval" :value="a.valueName">
       </td>
     <!--<td>{{item.valueName}}</td>-->
     <td>
       <button class="btn btn-danger upremove" type="button">删除</button>
     </td>
     </tr>
       <br/>
       <button class="btn btn-primary" @click="upattrval">保存</button>
       <button class="btn btn-primary " @click="upback">返回</button>
     <!--{{attrvaluelist.pmsBaseAttrValueList}}-->
     </table>
   </div>

 </div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
  var vm=new Vue({
            el:"#vuebox",
            data:{
            cata1:{},
            selecata1:"0",
                cata2:{},
                selecata2:"0",
                cata3:{},
                selecata3:"0",
                attrList:{},
                attrName:"",
                result:"",
                attrvaluelist:{},
                attrvalid:""
            },
            methods:{
                sellChange:function(){
                    axios.get("/getCatalog2",{params:{catalog1Id:this.selecata1}}).then(res=>{
                        this.selecata2=0;
                        this.selecata3=0;
                        this.cata3={},
                        this.attrList={},
                        this.cata2=res.data;
                    })
        },
                sel2Change:function () {
                    axios.get("/getCatalog3",{params:{catalog2Id:this.selecata2}}).then(res=>{
                        this.selecata3=0;
                        this.cata3=res.data;
                    })
                },
                sel3Change:function () {
                    axios.get("/seleAttrByCata3",{params:{catalog3Id:this.selecata3}}).then(res=>{
                        this.attrList=res.data;
                    })
                },
                addAttr:function () {
                    if(this.selecata3==0){
                layer.msg("请选择三级分类")
                return;
                    }else{
                    document.getElementById("attrNames").style.display="block";
                    document.getElementById("seleAttrlisttable").style.display="none";
                    document.getElementById("addAttrlisttable").style.display="block";
                    $("#children").html('')
                        this.attrName=""
                    document.getElementById("upAttrvalu").style.display="none";
                    }
                },
                addvals:function () {
                    var params=new URLSearchParams();
                    params.append("pmsBaseAttrValueList",window.zhi)
                    axios.post("/addAttrInfo",params,{params:{attrName:this.attrName,catalog3Id:this.selecata3}}).then(res=>{
                        this.result=res.data;
                        if(this.result=="success"){
                            axios.get("/seleAttrByCata3",{params:{catalog3Id:this.selecata3}}).then(res=>{
                                this.attrList=res.data;
                            })
                            alert("添加成功!")
                            document.getElementById("attrNames").style.display="none";
                            document.getElementById("seleAttrlisttable").style.display="block";
                            document.getElementById("addAttrlisttable").style.display="none";
                            document.getElementById("upAttrvalu").style.display="none";
                        }else{
                            alert("添加失败")
                        }
                    })
                },
                //点击返回属性列表
                goback(){
                    document.getElementById("attrNames").style.display="none";
                    document.getElementById("seleAttrlisttable").style.display="block";
                    document.getElementById("addAttrlisttable").style.display="none";
                    document.getElementById("upAttrvalu").style.display="none";
                },
                //修改属性参数
                upvalue:function (id) {
                    this.attrvalid=id;
                    axios.get("/getAttrValueList",{params:{attrId:id}}).then(res=>{
                        this.attrvaluelist=res.data;
                        document.getElementById("attrNames").style.display="none";
                        document.getElementById("seleAttrlisttable").style.display="none";
                        document.getElementById("addAttrlisttable").style.display="none";
                        document.getElementById("upAttrvalu").style.display="block";
                    })
                },
                //从修改返回显示平台属性
                upback(){
                    document.getElementById("attrNames").style.display="none";
                    document.getElementById("seleAttrlisttable").style.display="block";
                    document.getElementById("addAttrlisttable").style.display="none";
                    document.getElementById("upAttrvalu").style.display="none";
                },

                //保存修改操作
                upattrval(){
                    var params=new URLSearchParams();
                    params.append("pmsBaseAttrValueList",window.upzhi)
                    axios.post("/upAttrval",params,{params:{id:this.attrvaluelist.id,attrName:this.attrvaluelist.attrName,catalog3Id:this.attrvaluelist.catalog3Id}}).then(res=>{
                        this.result=res.data;
                        if(this.result=="success"){
                            var shuxingzhi=document.getElementsByName("shuxingzhi");
                            for(var i=0;i<shuxingzhi.length;i++){
                                console.log(shuxingzhi[i].value);
                                if(shuxingzhi[i].value=='-1'){
                                    var a=shuxingzhi[i].parentNode.parentNode.remove()
                                }
                            }
                            axios.get("/seleAttrByCata3",{params:{catalog3Id:this.selecata3}}).then(res=>{
                                this.attrList=res.data;
                            })
                            axios.get("/getAttrValueList",{params:{attrId:this.attrvalid}}).then(res=>{
                                this.attrvaluelist=res.data;
                            })
                            alert("修改成功!")
                            document.getElementById("attrNames").style.display="none";
                            document.getElementById("seleAttrlisttable").style.display="block";
                            document.getElementById("addAttrlisttable").style.display="none";
                            document.getElementById("upAttrvalu").style.display="none";
                        }else{
                            alert("修改失败!")
                        }
                    })
                },
                
                //删除属性
                delevalue:function (id) {
                    var boolean=confirm("确定删除平台属性以及平台属性值么?");
                    if(boolean==false){
                        return;
                    }
                    axios.get("/deleAttr",{params:{attrid:id}}).then(res=>{
                        if(res.data=="success"){
                           alert("删除成功!")
                           axios.get("/seleAttrByCata3",{params:{catalog3Id:this.selecata3}}).then(res=>{
                               this.attrList=res.data;
                           })
                       }else{
                           alert("删除失败!")
                       }
                   })
                }
                
                
            },
            mounted(){
                axios.get("/getCatalog1").then(res=>{
                    this.cata1=res.data;
                })
            }
    })
</script>
<script type="text/javascript">
    window.zhi=new Array();
    window.upzhi=new Array();
    function add() {
        $("#children").append('<tr class="frinput">\n' +
            '         <td>\n' +
            '           <input type="text" onblur="aa()" name="zhi">\n' +
            '         </td>\n' +
            '         <td>\n' +
            '           <button class="remove">删除</button>\n' +
            '         </td>\n' +
            '       </tr>')
        $(".remove").click(function () {
            var aa=$(this).parent().parent().children("td:nth-child(2)").children().val();
            for(var i=0;i<window.zhi.length;i++){
                if(window.zhi[i]==aa){
                     window.zhi.splice(i,1)
                }
            }
            $(this).parent().parent().remove()
        })
    }

    function aa() {
        zhi=[]
        var zhiinput=document.getElementsByName("zhi");
        for(var i=0;i<zhiinput.length;i++){
            if(zhiinput[i].value!=''){
                zhi.push(zhiinput[i].value)
            }
        }
        console.log(zhi);
    }


    //添加修改属性值时的行
  function addvalues() {

      $("#upval").append('<tr>\n' +
          '         <td>\n' +
          '          <input type="text" value="-1" name="shuxingzhi">\n' +
          '         </td>\n' +
          '         <td>\n' +
          '          <input type="text" onblur="upblur()" name="upval">\n' +
          '         </td>\n' +
          '         <!--<td>{{item.valueName}}</td>-->\n' +
          '         <td>\n' +
          '           <button class="btn btn-danger upremove" type="button">删除</button>\n' +
          '         </td>\n' +
          '       </tr>')
      $(".upremove").click(function () {
          var aa=$(this).parent().parent().children("td:nth-child(2)").children().val();
          for(var i=0;i<window.upzhi.length;i++){
              if(window.upzhi[i]==aa){
                  window.upzhi.splice(i,1)
              }
          }
          $(this).parent().parent().remove()
      })
  }


  //修改时鼠标离开事件
  function upblur() {
      upzhi=[];
      var upval=document.getElementsByName("upval");
      for(var i=0;i<upval.length;i++){
          if(upval[i].value!=''){
              upzhi.push(upval[i].value)
          }
      }
      console.log(window.upzhi);
  }


</script>
